<template>
  <div>
    <header class="header-- shadow-sm_ position-fixed">
      <nav class="navbar navbar-dark bg-info navbar-expand-lg">
        <div class="container">
          <a href="/" target="_self" class="navbar-brand">GiiBee</a>
          <button
            type="button"
            aria-label="Toggle navigation"
            class="navbar-toggler"
          >
            <span class="navbar-toggler-icon"></span>
          </button>
          <div
            id="nav-collapse"
            class="navbar-collapse collapse"
            style="display: none"
          >
            <ul class="navbar-nav">
              <li class="nav-item">
                <a
                  @click="$router.push('/home')"
                  href="javaScript:;"
                  target="_self"
                  class="nav-link"
                  >首页</a
                >
              </li>
              <li class="nav-item">
                <a
                  @click="$router.push('/products')"
                  href="javaScript:;"
                  target="_self"
                  class="nav-link"
                  >产品展示</a
                >
              </li>
              <li class="nav-item">
                <a
                  @click="$router.push('/about')"
                  href="javaScript:;"
                  target="_self"
                  class="nav-link"
                  >关于我们</a
                >
              </li>
              <li class="nav-item">
                <a
                  @click="$router.push('/exercise')"
                  href="javaScript:;"
                  target="_self"
                  class="nav-link"
                  >联系我们</a
                >
              </li>
            </ul>
            <ul class="navbar-nav ml-auto">
              <li class="form-inline">
                <form class="form-inline">
                  <input
                    v-model="searchValue"
                    @keyup.enter="searchChange"
                    placeholder="请输入关键字"
                    class="form-control form-control-md"
                  />
                  <button
                    @click.prevent="searchChange"
                    type="submit"
                    class="btn btn-secondary btn-md"
                  >
                    搜索
                  </button>
                </form>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </header>
    <!-- 由于 header 脱离文档流 写一个div 站位 -->
    <div style="width: 100%; height: 60px"></div>
    <!-- 路由展示坑 -->
    <nuxt></nuxt>
    <footer class="footer--" data-v-ca9b167a>
      <div class="container" data-v-ca9b167a>
        <div class="footer--copyright" data-v-ca9b167a>
          © 2021 GiiBee
          <address data-v-ca9b167a>郑州市高新区高新万科广场</address>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  name: "content",
  data() {
    return {
      searchValue: "",
    };
  },
  mounted() {},
  methods: {
    searchChange() {
      this.$router.push({
        path: "/products",
        query: {
          // url的参数, 类似get请求的传参
          search: this.searchValue,
        },
      });
    },
  },
  components: {},
};
</script>

<style lang="scss" scoped></style>
